<template>
  <div class="login">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span
          class="input-group-text"
          id="basic-addon1"
        >📱&nbsp;</span>
      </div>
      <input
        class="form-control"
        placeholder="用户名"
        type="text"
        v-model="loginInfo.username"
      />
    </div>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span
          class="input-group-text"
          id="basic-addon1"
        >🔒</span>
      </div>
      <input
        class="form-control"
        placeholder="密 码"
        type="text"
        v-model="loginInfo.password"
      />
    </div>
    <button type="button" @click="onLogin"
    class="btn btn-primary btn-lg btn-block"
    >登录</button>
  </div>
</template>

<script>
import {
  reactive, ref,
  getCurrentInstance,
} from 'vue' 
import { login } from '../../../network/user'
import storage from '../../../utils/storage'

export default {
  name: "Login",
  components: {},
  setup() {
    const { ctx } = getCurrentInstance()
    const loginInfo = reactive({
      username: '',
      password: ''
    }) //记录登录信息

    //登录
    const onLogin = async () => {
      if(!loginInfo.username) {
        return alert('请输入用户名')
      }
      if(!loginInfo.password) {
        return alert('请输入密码')
      }
      const result = await login(loginInfo)
      //登录失败
      if(result.status !== 200) {
        loginInfo.username = ""
        loginInfo.password = ""
        return alert(result.message)
      }
      //将用户信息存储到store中
      ctx.$store.commit('setUserInfo', result.data)
      ctx.$router.push('/')

    }


    return {
      loginInfo,
      onLogin
    }
  }
};
</script>

<style scoped lang='stylus' >
.login
  margin-top 50px
</style>